<template>
  <div class="app-container">
    <el-form :model="messageForm" ref="messageForm" :rules="rules" size="small" label-width="150px">
      <el-form-item label="短信类型" prop="messageType">
        <el-select v-model="messageForm.messageType" placeholder="短信类型" @change="handleChangeMessageType">
          <el-option
            v-for="dict in dict.type.message_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name" v-if="messageForm.messageType!=='notice_send' && messageForm.messageType!== 'invite_shop'">
        <el-input
          v-model="messageForm.name"
          placeholder="请输入联系人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName" v-if="messageForm.messageType === 'invite_shop'">
        <el-input
          v-model="messageForm.shopName"
          placeholder="请输入店铺名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input
          v-model="messageForm.mobile"
          placeholder="请输入联系电话"
          clearable
        />
      </el-form-item>
      <el-form-item label="餐券数量" prop="count" v-if="messageForm.messageType==='after_buy_wine'">
        <el-input
          v-model="messageForm.count"
          placeholder="请输入餐券数量"
          clearable
        />
      </el-form-item>
      <el-form-item label="预约信息" prop="bookingInfo" v-if="messageForm.messageType==='booking_success'">
        <el-input
          v-model="messageForm.bookingInfo"
          placeholder="请输入预约信息:日期,房间号,中/晚餐"
          clearable
          maxlength="35"
        />
      </el-form-item>

      <!--客户到店，平台支付成功后提醒客户此次消费用券 -->
      <el-form-item label="此次消费" prop="useTicket" v-if="messageForm.messageType==='platform_pay_success'">
        <el-input
          type="number"
          v-model="messageForm.useTicket"
          placeholder="请输入数量"
          clearable
        />
      </el-form-item>
      <el-form-item label="剩余数量" prop="leftTicket" v-if="messageForm.messageType==='platform_pay_success'">
        <el-input
          type="number"
          v-model="messageForm.leftTicket"
          placeholder="请输入数量"
          clearable
        />
      </el-form-item>
      <!--提醒发货短信 -->
      <el-form-item label="商品信息" prop="goodsInfo" v-if="messageForm.messageType==='notice_send'">
        <el-input
          v-model="messageForm.goodsInfo"
          placeholder="请输入商品信息"
          clearable
          maxlength="35"
        />
      </el-form-item>
      <el-form-item label="购买数量" prop="buyNum" v-if="messageForm.messageType==='notice_send'">
        <el-input
          type="number"
          v-model="messageForm.buyNum"
          placeholder="请输入购买数量"
          clearable
        />
      </el-form-item>
      <el-form-item label="收货地址" prop="address" v-if="messageForm.messageType==='notice_send'">
        <el-input
          v-model="messageForm.address"
          placeholder="请输入商品信息"
          clearable
          maxlength="35"
        />
      </el-form-item>
      <el-form-item label="收货人姓名" prop="name" v-if="messageForm.messageType==='notice_send'">
        <el-input
          v-model="messageForm.name"
          placeholder="请输入收货人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="收货电话" prop="phone" v-if="messageForm.messageType==='notice_send'">
        <el-input
          v-model="messageForm.phone"
          placeholder="请输入收货电话"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-message" size="small" @click="sendMessage">发送</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { send } from "@/api/message/message";

export default {
  name: "send.vue",
  dicts: ['message_type',],
  data() {
    return {
      messageForm:{},
      // 表单校验
      rules: {
        messageType:[
          { required: true, message: "短信类型不能为空", trigger: "blur" }
        ],
        bookingInfo:[
          { required: true, message: "短信类型不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        shopName: [
          { required: true, message: "店铺名称不能为空", trigger: "blur" }
        ],
        count: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        useTicket: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        leftTicket: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "收货人号码不能为空", trigger: "blur" },
          {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
      },

    };
  },
  created() {
    const messageForm = JSON.parse(localStorage.getItem('messageForm')) || {};
    this.messageForm = messageForm;
  },
  destroyed() {
    localStorage.setItem("messageForm",JSON.stringify(this.messageForm));
  },
  methods:{
    sendMessage(){
      this.$refs["messageForm"].validate(valid => {
        if (valid) {
          let formData = {
            ...this.messageForm,
          }
          console.log(formData);
          send(formData).then(response=>{
            console.log(response);
            this.$modal.msgSuccess("发送成功");
            localStorage.removeItem('messageForm');
            this.resetQuery();
          })
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      localStorage.removeItem('messageForm');
      this.messageForm = {};
    },
    handleChangeMessageType(){
      const {messageType} = this.messageForm || {};
      this.messageForm = {messageType};
    },
  }
}
</script>

<style scoped>

</style>
